<template>
  <div class="container">
    <search></search>
    <div class="enterprise">
      <div class="center-title">
        <img src="../../assets/img/nlzx-title-bg.png" alt="">
        <span>企业办事</span>
        <img src="../../assets/img/nlzx-title-bg.png" alt="">
      </div>
      <div class="center-sub-title">Enterprise service</div>
      <div class="center-box">
        <div class="enterprise-content">
          <row-scroll :width="1190" :height="32">
            <div class="enterprise-scroll-row">
              <img :src="require('../../assets/img/enterprise/enterprise-scroll-bg.png')" alt="">
            </div>
          </row-scroll>
          <template v-for="(item, index) in enterprise" :key="index">
            <div class="film-item" v-if="index < 6">
              <img class="film-item-icon" :src="item.icon" alt="">
              <div class="film-item-name">{{item.name}}</div>
            </div>
          </template>
          <row-scroll :width="1190" :height="32">
            <div class="enterprise-scroll-row">
              <img :src="require('../../assets/img/enterprise/enterprise-scroll-bg.png')" alt="">
            </div>
          </row-scroll>
        </div>
        <div class="enterprise-content">
          <row-scroll :width="1190" :height="32">
            <div class="enterprise-scroll-row">
              <img :src="require('../../assets/img/enterprise/enterprise-scroll-bg.png')" alt="">
            </div>
          </row-scroll>
          <template v-for="(item, index) in enterprise" :key="index">
            <div class="film-item" v-if="index >= 6">
              <img class="film-item-icon" :src="item.icon" alt="">
              <div class="film-item-name">{{item.name}}</div>
            </div>
          </template>
          <row-scroll :width="1190" :height="32">
            <div class="enterprise-scroll-row">
              <img :src="require('../../assets/img/enterprise/enterprise-scroll-bg.png')" alt="">
            </div>
          </row-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Search from "@/components/Search.vue";
import {defineComponent} from "vue";
import RowScroll from "@/components/RowScroll.vue";
export default defineComponent({
  components: {RowScroll, Search, },
  setup() {
    const enterprise = [
      {
        name: '企业信息',
        icon: require('@/assets/img/enterprise/enterprise-icon-1.png')
      },
      {
        name: '政策直达',
        icon: require('@/assets/img/enterprise/enterprise-icon-2.png')
      },
      {
        name: '融资服务',
        icon: require('@/assets/img/enterprise/enterprise-icon-3.png')
      },
      {
        name: '企业申诉',
        icon: require('@/assets/img/enterprise/enterprise-icon-4.png')
      },
      {
        name: '企业行政代理',
        icon: require('@/assets/img/enterprise/enterprise-icon-5.png')
      },
      {
        name: '企业财务代理',
        icon: require('@/assets/img/enterprise/enterprise-icon-6.png')
      },
      {
        name: '招商引资',
        icon: require('@/assets/img/enterprise/enterprise-icon-7.png')
      },
      {
        name: '企业在线',
        icon: require('@/assets/img/enterprise/enterprise-icon-8.png')
      },
      {
        name: '5G智慧经办大厅',
        icon: require('@/assets/img/enterprise/enterprise-icon-9.png')
      },
      {
        name: '开发中',
        icon: require('@/assets/img/enterprise/enterprise-icon-10.png')
      },
      {
        name: '开发中',
        icon: require('@/assets/img/enterprise/enterprise-icon-10.png')
      },
      {
        name: '开发中',
        icon: require('@/assets/img/enterprise/enterprise-icon-10.png')
      }
    ]
    return {
      enterprise
    };
  },
});
</script>

<style scoped lang="less">
.container {

  .enterprise {
    background: url("../../assets/img/nlzx-bg.png");

    .center-title {
      padding-top: 40px;
      font-size: 32px;
      color: #313233;
      letter-spacing: 1.92px;
      font-weight: 500;

      span {
        margin: 0 10px;
        vertical-align: middle;
      }

      img {
        vertical-align: middle;
        width: 24px;
      }
    }

    .center-sub-title {
      margin-top: 10px;
      font-size: 16px;
      color: #B0B5B8;
      letter-spacing: 0.96px;
      text-align: center;
      font-weight: 400;
    }

    .center-box {
      width: 1200px;
      height: 600px;
      margin: 40px auto 0;
      //padding: 40px 0 40px;

      background: url("../../assets/img/enterprise/enterprise-bg.png") no-repeat;

      .enterprise-content {
        display: flex;
        flex-wrap: wrap;
        //justify-content: space-between;
        margin-bottom: 138px;
        padding: 0 5px;

        .enterprise-scroll-row {
          display: inline-block;
          padding: 4px 5px 4px 0;
          margin-right: 2px;
        }


        .film-item {
          width: 184px;
          height: 124px;
          margin: 0 7px;
          padding: 20px 0;
          background: linear-gradient(180deg, #DBC09E 0%, #BD9A75 100%);
          border-radius: 4px;
          cursor: pointer;
          text-align: center;

          &:hover {
            //width: 190px;
            //height: 128px;
            //margin: -2px 4px;
            background: linear-gradient(180deg, #b79265 0%, #806342 100%);
          }

          .film-item-icon {
            height: 50px;
          }
          .film-item-name {
            margin-top: 10px;
            font-size: 22px;
            font-weight: 500;
            color: #FFF8EA;
            letter-spacing: 1px;
          }
        }
      }
    }
  }

}

</style>
